<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
     
    </script>
    
    
    <div style="position:relative">
        <img src="images/wheel_wrap.png" width="100%" />
        <img style="transition:all 3s;position:absolute;left:50%;top:50%;margin-left:-42%;margin-top:-43%"
             src="images/564fff53N974e6518.png" width="84%" id="pan" />
        <img style="position:absolute;left:50%;top:50%;margin-left:-15%;margin-top:-18%"
             src="images/wheel_center.png" width="30%" id="luckyBtn" />
    </div>
    
    <script>
        var arr = [3600,3645,3690,3735,3780,3825,3870,3915,3645,3645,3645,3645,3645,3645,3645,3645,3645,3645]
        luckyBtn.onclick = function(){
            var luckyDeg = arr[Math.floor(Math.random()*arr.length)];
            pan.style.transform = "rotate("+luckyDeg+"deg)";
        };
    </script>
    
    
    
</body>
</html>